<template>
  <div>
    <Row>
      <i-col span="12">
        <Card>
          <!--<p slot="title">-->
            <!--<Icon type="ios-pulse-strong"></Icon>-->
            <!--简历来源占比-->
          <!--</p>-->
          <div :style="page_half_height">
            <data-source-pie bind_id="bind1" :optionData="option1"></data-source-pie>
          </div>
        </Card>
      </i-col>
      <i-col span="12">
        <Card>
          <!--<p slot="title">-->
            <!--<Icon type="ios-pulse-strong"></Icon>-->
            <!--学校占比-->
          <!--</p>-->
          <div :style="page_half_height">
            <data-source-pie bind_id="bind2" :optionData="option2"></data-source-pie>
          </div>
        </Card>
      </i-col>
    </Row>

    <Row>
      <i-col span="12">
        <Card>
          <!--<p slot="title">-->
            <!--<Icon type="ios-pulse-strong"></Icon>-->
            <!--入职到岗率-->
          <!--</p>-->
          <div :style="page_half_height">
            <data-source-pie bind_id="bind3" :optionData="option3"></data-source-pie>
          </div>
        </Card>
      </i-col>
      <i-col span="12">
        <Card>
          <!--<p slot="title">-->
            <!--<Icon type="ios-pulse-strong"></Icon>-->
            <!--面试通过率-->
          <!--</p>-->
          <div :style="page_half_height">
            <data-source-pie bind_id="bind4" :optionData="option4"></data-source-pie>
          </div>
        </Card>
      </i-col>
    </Row>

  </div>
</template>
<script>
  import dataSourcePie from './part/dataSourcePie.vue';

  export default {
    components: {
      dataSourcePie
    },
    data () {
      return {
        page_half_height:'height:' + (window.innerHeight-260)/2 + 'px',
        option1 : {
          title : {
            text: '简历来源占比',
            subtext: '最近一年',
            x:'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: ['应届生求职网', '招聘会', '宣讲会','同学推荐','其他']
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
//              magicType : {
//                show: true,
//                type: ['pie', 'funnel'],
//                option: {
//                  funnel: {
//                    x: '25%',
//                    width: '50%',
//                    funnelAlign: 'right',
//                    max: 123
//                  }
//                }
//              },
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          series: [
            {
              name: '简历来源',
              type: 'pie',
              radius: '66%',
              center: ['50%', '60%'],
              data: [
                {value: 23, name: '其他', itemStyle: {normal: {color: '#9bd598'}}},
                {value: 53, name: '宣讲会', itemStyle: {normal: {color: '#ffd58f'}}},
                {value: 28, name: '招聘会', itemStyle: {normal: {color: '#abd5f2'}}},
                {value: 17, name: '应届生求职网', itemStyle: {normal: {color: '#ab8df2'}}},
                {value: 78, name: '同学推荐', itemStyle: {normal: {color: '#e14f60'}}}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
        option2 : {
          title : {
            text: '学校占比',
            subtext: '最近一年',
            x:'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            x: 'left',
            data: ['杭州电子科技大学', '浙江工业大学', '其他', '浙江大学', '南京大学']
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
//              magicType : {
//                show: true,
//                type: ['pie', 'funnel'],
//                option: {
//                  funnel: {
//                    x: '25%',
//                    width: '50%',
//                    funnelAlign: 'right',
//                    max: 123
//                  }
//                }
//              },
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          series: [
            {
              name: '学校来源',
              type: 'pie',
              radius: '66%',
              center: ['50%', '60%'],
              data: [
                {value: 300, name: '杭州电子科技大学', itemStyle: {normal: {color: '#9bd598'}}},
                {value: 187, name: '浙江工业大学', itemStyle: {normal: {color: '#ffd58f'}}},
                {value: 100, name: '其他', itemStyle: {normal: {color: '#abd5f2'}}},
                {value: 124, name: '浙江大学', itemStyle: {normal: {color: '#ab8df2'}}},
                {value: 55, name: '南京大学', itemStyle: {normal: {color: '#e14f60'}}}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
        option3 : {
          title : {
            text: '入职到岗率',
            subtext: '最近一年'
          },
          tooltip : {
            trigger: 'axis'
          },
          legend: {
            data:['到岗率']
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              magicType : {show: true, type: ['line', 'bar']},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          xAxis : [
            {
              type : 'category',
              boundaryGap : false,
              data : ['第一季度','第二季度','第三季度','第四季度']
            }
          ],
          yAxis : [
            {
              type : 'value',
              axisLabel : {
                formatter: '{value} %'
              }
            }
          ],
          series : [
            {
              name:'到岗率',
              type:'line',
              data:[60, 50, 85, 73],
              markPoint : {
                data : [
                  {type : 'max', name: '最大值'},
                  {type : 'min', name: '最小值'}
                ]
              },
              markLine : {
                data : [
                  {type : 'average', name: '平均值'}
                ]
              }
            }
          ]
        },
        option4 : {
          title : {
            text: '面试通过率',
            subtext: '最近一年'
          },
          tooltip : {
            trigger: 'axis'
          },
          legend: {
            data:['通过率']
          },
          toolbox: {
            show : true,
            feature : {
              mark : {show: true},
              dataView : {show: true, readOnly: false},
              magicType : {show: true, type: ['line', 'bar']},
              restore : {show: true},
              saveAsImage : {show: true}
            }
          },
          calculable : true,
          xAxis : [
            {
              type : 'category',
              boundaryGap : false,
              data : ['第一季度','第二季度','第三季度','第四季度']
            }
          ],
          yAxis : [
            {
              type : 'value',
              axisLabel : {
                formatter: '{value} %'
              }
            }
          ],
          series : [
            {
              name:'通过率',
              type:'line',
              data:[11, 17, 15, 18],
              markPoint : {
                data : [
                  {type : 'max', name: '最大值'},
                  {type : 'min', name: '最小值'}
                ]
              },
              markLine : {
                data : [
                  {type : 'average', name: '平均值'}
                ]
              }
            }
          ]
        }
      }
    }
  }
</script>
<style>

</style>
